<template>
	<div class="bannerEdit">
		<!--  -->
		<el-dialog v-model="isShowDialog" width="700px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div>修改banner</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
				<el-form-item label="图片">
					<el-upload list-type="picture-card" :auto-upload="false" :show-file-list="true" :limit="1"
						accept=".pdf,.jpg,.png" v-model:file-list="fileList"
						:class="{ 'hide_box': fileList.length != 0 }" :on-remove="handleFileRemove">
						<el-tooltip effect="dark" content="支持PDF/JPG/PNG格式">
							<el-icon>
								<Plus />
							</el-icon>
						</el-tooltip>
						<template #file="{ file }">
							<div>
								<img class="el-upload-list__item-thumbnail" :src="fileList[0].url" alt="" />
								<span class="el-upload-list__item-actions">
									<span class="el-upload-list__item-preview"
										@click="handlePictureCardPreview(fileList[0].url)">
										<el-icon><zoom-in /></el-icon>
									</span>
									<span class="el-upload-list__item-delete" @click="handleDownload(fileList[0].url)">
										<el-icon>
											<Download />
										</el-icon>
									</span>
									<span class="el-upload-list__item-delete" @click="handleFileRemove">
										<el-icon>
											<Delete />
										</el-icon>
									</span>
								</span>
							</div>
						</template>

					</el-upload>
				</el-form-item>

				<el-form-item label="打开方式" prop="way">
					<el-select v-model="formData.way" clearable placeholder="请选择打开方式">
						<el-option v-for="item in wayList" :label="item.label" :value="item.value" :key="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="跳转网页地址" v-if="formData.way == 1 || formData.way == 2">
					<el-input v-model="formData.webUrl" placeholder="请输入跳转网页地址" />
				</el-form-item>
				<el-form-item label="平台" prop="client">
					<el-radio-group v-model="formData.client">
						<el-radio :label="1">IOS</el-radio>
						<el-radio :label="2">Android</el-radio>
						<el-radio :label="3">IOS+Android</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="IOS版本号区间" v-if="formData.client == 1 || formData.client == 3">
					<div class="aic">
						<el-input v-model="formData.iosVersionBeg" placeholder="开始版本号" />
						<div class="mlr20" style="width: 20px;height: 1px;background: #000;"></div>
						<el-input v-model="formData.iosVersionEnd" placeholder="结束版本号" />
					</div>
				</el-form-item>
				<el-form-item label="安卓版本号区间" v-if="formData.client == 2 || formData.client == 3">
					<div class="aic">
						<el-input v-model="formData.androidVersionBeg" placeholder="开始版本号" />
						<div class="mlr20" style="width: 20px;height: 1px;background: #000;"></div>
						<el-input v-model="formData.androidVersionEnd" placeholder="结束版本号" />
					</div>
				</el-form-item>
				<el-form-item label="序号" prop="sort">
					<el-input v-model="formData.sort" placeholder="请输入序号" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="2">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="PicdialogVisible">
			<img w-full :src="dialogImageUrl" alt="封面图预览" />
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { editBannerApi } from '@/api/operationsManage/banner'
export default defineComponent({
	name: 'bannerEdit', //banner修改
	components: {},
	// props: {},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			wayList: [
				{
					value: 0,
					label: '不做处理'
				},
				{
					value: 1,
					label: '内部浏览器'
				},
				{
					value: 2,
					label: '外部浏览器'
				}
			],
			formData: {
				way: undefined,	//打开方式
				status: undefined,
				client: undefined,	//平台
				sort: undefined,	//序号
				webUrl: undefined,	//跳转网页地址
				iosVersionBeg: undefined,	//开始版本号 ios
				iosVersionEnd: undefined,	//结束版本号
				androidVersionBeg: undefined,//开始版本号 安卓
				androidVersionEnd: undefined,//结束版本号
				id:undefined
			},
			// 表单校验
			rules: {
				way: [{ required: true, message: '打开不能为空', trigger: 'blur' }],
				client: [{ required: true, message: '平台不能为空', trigger: 'blur' }],
				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			fileList.value=[{url:row.img}]
			state.formData=row
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 提交
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					if(fileList.value.length==0) return ElMessage.error('请上传图片')
					if(state.formData.way==0) state.formData.webUrl=undefined
					if(state.formData.client==1){
						state.formData.androidVersionBeg=undefined
						state.formData.androidVersionEnd=undefined
					}else if(state.formData.client==2){
						state.formData.iosVersionBeg=undefined
						state.formData.iosVersionEnd=undefined
					}
					console.log('state.formData',state.formData);
					
					state.loading = true;
					const formData = new FormData();
					formData.append('multiFile', fileList.value[0].raw)
					for(let key in  state.formData){
						let value=state.formData[key]
						if(value!=undefined)formData.append(key, value)
					}
					editBannerApi(formData).then((res:any) => {
						if (res.code === 200) {
							ElMessage.success('修改成功');
							closeDialog(); // 关闭弹窗
							emit('getList');
						} else {
							state.loading = false;
						}
					})
				}
			});
		};
		const resetForm = () => {
			state.formData = {
				way: undefined,	//打开方式
				status: undefined,
				client: undefined,	//平台
				sort: undefined,	//序号
				webUrl: undefined,	//跳转网页地址
				iosVersionBeg: undefined,	//开始版本号 ios
				iosVersionEnd: undefined,	//结束版本号
				androidVersionBeg: undefined,//开始版本号 安卓
				androidVersionEnd: undefined,//结束版本号
				id:undefined
			};
			fileList.value=[]
		};
		const fileList = ref([])

		// 预览
		const dialogImageUrl = ref('')
		const PicdialogVisible = ref(false)
		const handlePictureCardPreview = (file) => {
			dialogImageUrl.value = file
			PicdialogVisible.value = true
		}
		// 下载
		const handleDownload = (file) => {
			// 检查文件是否有 url 属性，若有则直接下载 
			if (file) {
				const link = document.createElement('a');
				link.href = file;
				// 使用文件原始名称作为下载文件名 
				link.download = file.name || 'download';
				link.click();
				// 清理创建的元素 
				link.remove();
			} else {
				ElMessage.error('无法获取文件下载信息');
			}
		}
		const handleFileRemove = () => {
			// 文件移除时的处理
			fileList.value = []; // 更新文件列表
		}
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			resetForm,
			menuRef,
			formRef,
			PicdialogVisible,
			dialogImageUrl,
			handlePictureCardPreview,
			handleDownload,
			handleFileRemove,
			fileList,
			...toRefs(state),
		};
	},
});
</script>
<style lang="scss">
.bannerEdit{
	
.hide_box .el-upload--picture-card {
	display: none !important;
}

.el-upload,
.el-upload-list__item {
	width: 440px !important;
	height: 140px !important;
}
}
</style>
